<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="styles/style.css">
        <link rel="stylesheet" href="styles/theme/atom-one-dark.css">
        <title>例子2-JS进阶总结</title>
    </head>
    <body>
        <button id="btn">Click me</button>
        <pre>
            <code>
                // 闭包对内存的占用和释放

                function initBinding() {
                    var oBtn = document.querySelector('#btn')
                    oBtn.onclick = function showBtnId() { // 出现了循环引用
                        var largeStr = new Array(100000).join('x')
                        console.log(oBtn.id)
                    }
                }

                initBinding()

                // 改写
                function initBinding() {
                    var oBtn = document.querySelector('#btn')
                    var id = oBtn.id
                    oBtn.onclick = function showBtnId() {
                        console.log(id)
                    }
                    oBtn = null
                }

                initBinding()
            </code>
        </pre>
        <script src="scripts/libs/highlight.pack.js"></script>
        <script src="scripts/2.js"></script>
        <script>
            hljs.initHighlightingOnLoad();
        </script>
    </body>
</html>